<template>
  <div class="play publicBox">
    <div class="playTop">
    </div>
    <div class="playMain">
      <div class="publicBoxContent conTop">
        <div class="contentTop">
          提交<span>1笔</span>订单成功
          <!-- <span class="examine" @click="dialogVisible = true">查看订单详情</span> -->
        </div>
        <div class="contentTop stac">为保证价格和库存不影响您的订单，请在{{isUnderBond ? 12 : 4}}小时内完成付款</div>
      </div>
      <div class="publicBoxContent conBtm ">
        <div class="conBtmLeft">余额支付</div>
        <div class="conBtmRight">
          <div>当前账户余额(元)：<span>￥{{userInfo.balance}}</span></div>
          <div class="rightBtn" @click="immediatePayment">立即支付</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "play",
    data() {
      return {
        order_id: 0,
        userInfo: {},
        dialogVisible: false,
        isUnderBond : true
      }
    },
    created() {
      this.order_id = this.$route.query.order_id;
      this.getOrder();
      this.getUserInfo();
    },
    methods: {
      getOrder() {
        this.$HttpGet(`/index.php?s=/admin/home.order/detail&order_id=${this.order_id}`, {}).then(res => {
          res.data.order.goods.forEach((item) => {
            if (item.trade_type_name == "保税") {
              this.isUnderBond = false;
              return false;
            }
          });
        })
      },
      getUserInfo() {
        this.$HttpGet(`/index.php?s=/admin/index/details`, {}).then(res => {
          this.userInfo = res.data;
        })
      },
      immediatePayment () {
        this.$HttpGet("/index.php?s=/admin/home.order/pay",{
          order_id : this.order_id,
          payType : 10
        }).then(res => {
          this.$notifySuccess("支付成功");
          this.$router.push({path : "/index/order/allOrder"});
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
    .play {
        .playTop {
            height: 90px;
            padding: 0;
            background-color: #ffffff;
        }

        .playMain {
            padding: 20px;

            .conTop {
                height: 106px;
                margin-top: 20px;
                margin-bottom: 20px;

                .contentTop {
                    margin-top: 20px;

                    > span {
                        color: #E93030;
                    }

                    .examine {
                        color: #3859A7;
                        margin-left: 30px;
                    }
                }

                .stac {
                    color: rgba(0, 0, 0, 0.5);
                }
            }

            .conBtm {
                height: 180px;
                display: flex;

                .conBtmRight {
                    margin-left: 180px;

                    span {
                        font-size: 14px;
                        font-weight: 500;
                        color: #060001;
                    }

                    .rightBtn {
                        width: 130px;
                        height: 44px;
                        background: #DB3330;
                        border-radius: 22px;
                        text-align: center;
                        line-height: 44px;
                        color: #ffffff;
                        margin-top: 75px;
                        cursor: pointer;
                    }
                }
            }

        }
    }
    .info_sp {
        width: 100%;
        height: 170px;
        margin-top: 20px;

        .info_top {
            width: 100%;
            height: 40px;
            background: rgba($color: #385cc8, $alpha: 0.1);
            padding-left: 15px;
            display: flex;
            justify-content: space-around;
            text-align: left;

            table {
                width: 100%;
                height: 100%;

                .tableLeft {
                    width: 30%;
                }
            }
        }

        .info_centent {
            padding-left: 15px;
            width: calc(100% - 2px);
            height: 90px;
            background: #ffffff;
            border-left: 1px solid #eeeeee;
            border-right: 1px solid #eeeeee;

            table {
                width: 100%;
                height: 100%;

                .tableLeft {
                    width: 30%;
                    height: 100%;

                    .cnm {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        align-items: center;

                        .tableLeftImg {
                            width: 56px;
                            height: 56px;
                            background-color: #2CCE30;
                        }

                        .tableLeftName {
                            margin-left: 16px;
                        }
                    }


                }
            }
        }

        .info_bottom {
            width: 100%;
            height: 50px;
            padding-left: 15px;
            // line-height: 50px;
            background: rgba($color: #385cc8, $alpha: 0.05);
            display: flex;
            justify-content: space-between;
            align-content: center;
            align-items: center;

            input {
                width: 550px;
                height: 30px;
                background: #ffffff;
                border: 1px solid #eeeeee;
                border-radius: 5px;
            }

            .bottom_rig {
                text-align: right;

                .total {
                    margin-left: 35px;
                    margin-right: 20px;
                    color: rgba(#E93030, 0.7);

                }
            }
        }
    }
</style>
